<!DOCTYPE html>
<html>
    <body>
        <canvas id="myCanvas" width="200" height="100"
        style="border:1px solid red;">
        Your browser does not support the canvas element.

        </canvas>
        <script type="text/javascript">
        var c=document.getElementById("myCanvas")
        var cxt=c.getContext("2d");
        var grd=cxt.createLinearGradient(0,0,175,50);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"blue");
        cxt.fillStyle=grd;
        cxt.fillRect(0,0,175,50);
        </script>

    </body>
</html>